import React, {useEffect} from 'react';
import {View, Text, TouchableOpacity, TextInput, Image} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import Tabs from '../../components/Tabs';
import {Progress} from '@ant-design/react-native';
import styles from './style';
import px2dp from '../../utils/px2dp';

const MyDownload = () => {
  const navigation = useNavigation();
  const dataSource = [
    {name: '正在下载', id: 0},
    {name: '下载完成', id: 1},
  ];
  return (
    <AreaView>
      <Tabs dataSource={dataSource} />
      <TouchableOpacity  activeOpacity={1} style={styles.list} activeOpacity={1}>
        <View style={styles.download_list}>
          <Image style={styles.img} />
          <View style={styles.content}>
            <Text style={styles.title}>课程名称名称</Text>
            <View style={styles.download_info}>
              <View style={styles.progress}>
                <Text style={styles.num}>已下载75%</Text>
                <View style={styles.progress_style}>
                  <View style={[styles.barStyle, {width: px2dp(408 * 0.75)}]} />
                </View>
              </View>
              <View style={styles.btn}>
                <Image
                  style={styles.start}
                  source={require('../../assets/images/start.png')}
                />
                <Image
                  style={styles.del}
                  source={require('../../assets/images/del.png')}
                />
              </View>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    </AreaView>
  );
};

export default MyDownload;
